:root {/*伪类root选择器,其中定义的变量可作为全局变量*/
  --primary-color: #31c27c;/*自定义初始颜色，将变量定义为#31c27c*/
}
body {
  margin: 0;/*设置body外边距为0，盒子紧贴网页*/
  background: #f5f5f5;/*背景颜色为#f5f5f5*/
  font-family: Microsoft Yahei;/*字体家族为微软雅黑*/
  font-size: 14px;/*字体大小为14像素点*/
  /* min-width: 1000px; */ /*设置最小宽度，确定基本的排版*/
}
a {
  text-decoration: none;/*去掉a标签的下划线*/
  color: #000;/*颜色为#000*/
}
header {
  height: 90px;/*高度为90像素点*/
  background: white;/*背景为白色*/
  display: flex;/*调整为弹性布局*/
  align-items: center;/*flex子项在flex容器的当前行的纵轴方向上为居中对齐*/
}
.header-inner, main {
  /* width: 1200px; */
  padding: 20px;/*内边距为20px*/
  margin: auto;/*外边距的上下、左右自动调整至分别相同*/
}
.tag-list {
  margin-top: 50px;/*上边距为50px*/
  margin-bottom: 15px;/*下边距为15px*/
}
.tag-item {
  display: inline-block;/*布局调整为融合行内于块级，不独占一行的块级元素*/
  padding: 0 8px;/*上下内边距为0，左右内边距为8px*/
  margin-right: 24px;/*右外边距为24px*/
  line-height: 26px;/*行高为26px*/
  color: #000;/*颜色为#000*/
  text-decoration: none;/*去掉下划线*/
}
.tag-active {/*激活状态下*/
  background: var(--primary-color);/*背景为自定义颜色*/
  color: white;/*颜色为白色*/
}
.tag-item:not(.tag-active):hover {
  color: var(--primary-color);/*颜色为自定义颜色，设置除了tag-active以外tag-item类鼠标悬停的字体颜色*/
}
.nowrap {
  white-space: nowrap;/*忽略nowrap中的空白和换行，只有遇到br时才换行*/
  overflow: hidden;/*设置文本溢出时的隐藏溢出部分*/
  text-overflow: ellipsis;/*隐藏的文本用省略号来代替*/
}
.playlist {
  display: grid;/*设置布局为网格布局块*/
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));/*设置每个格子宽度自适应在200px和1fr中变动*/
  gap: 45px 15px;/*设置网格上下间距45px，左右间距15px*/
  margin-bottom: 45px;/*外下边距为45px*/
}
.cover-wrap {
  display: flex;/*调整为弹性布局*/
  position: relative;/*设置位置偏移属性*/
  overflow: hidden;/*隐藏文本的溢出部分*/
  width: 100%;/*宽度占据盒子的100%*/
  margin-bottom: 15px;/*外下边距为15px*/
  align-items: center;/*行纵轴居中对齐*/
  justify-content: center;/*在主轴上内容居中对齐*/
  cursor: pointer;/*鼠标移动到该部分时变成爪子*/
}
.cover-img {
  width: 100%;/*宽度占据盒子的100%*/
  transition: all 0.75s;/*鼠标滑过该部分时会有0.75秒的动画过渡*/
}
.cover-mask {
  position: absolute;/*设置相较于最近父级元素的绝对位置*/
  left: 0;/*左偏移量为0*/
  top: 0;/*上偏移量为0*/
  right: 0;/*右偏移量为0*/
  bottom: 0;/*下偏移量为0*/
  background: #000;/*背景颜色为黑*/
  opacity: 0;/*透明度为0*/
  transition: all 0.5s;/*鼠标滑过该部分时会有0.5秒的动画过渡*/
}
.cover-play {
  position: absolute;/*设置相较于最近父级单位的绝对位置*/
  left: 50%;/*左偏移量为父级的50%*/
  top: 50%;/*上偏移量为父级的50%*/
  margin-left: -35px;/*外左边距为-35px*/
  margin-top: -35px;/*外上边距为-35px*/
  opacity: 0;/*透明度为0*/
  transform: scale(0.7);/*缩放大小为0.7*/
  transition: all 0.5s;/*鼠标滑过该部分时会有0.5秒的动画过渡*/
}
.cover-wrap:hover .cover-mask {
  opacity: 0.2;/*设置鼠标悬停在该部分时透明度变为0.2*/
}
.cover-wrap:hover .cover-play {
  opacity: 1;/*设置鼠标悬停在该部分时透明度变为1*/
  transform: scale(1);/*设置鼠标悬停在该部分时缩放大小为1*/
}
.cover-wrap:hover .cover-img {
  transform: scale(1.07);/*设置鼠标悬停在该部分时缩放大小为1.07*/
}
.album-title:hover {
  color: var(--primary-color);/*设置鼠标悬停在该部分时颜色变为自定义颜色*/
}
.album-author {
  color: #999;/*文本颜色为灰色*/
  line-height: 1.6;/*行高为1.6，可以用来调整文本纵轴位置*/
}
.album-author:hover {
  color: var(--primary-color);/*设置鼠标悬停在该部分时颜色变为自定义颜色*/
}
.album-time {
  color: #999;/*设置文本颜色为灰色*/
}
.page {
  display: flex;/*调整为弹性布局*/
  align-items: center;/*行纵轴居中对齐*/
  justify-content: center;/*在主轴上内容居中对齐*/
}
.page-item {
  display: inline-block;/*布局调整为融合行内于块级，不独占一行的块级元素*/
  color: #a2a2a2;/*设置文本颜色*/
  line-height: 50px;/*行高为50px*/
  padding: 0 20px;/*内上下边距为0 左右边距为20px*/
  margin: 10px;/*外边距为10px*/
  font-size: 16px;/*字体大小为16px，一般字体大小为16px*/
}
.page-current, .page-item:not(.page-more):hover {
  background: var(--primary-color);/*设置page-current和当鼠标悬停在page-item类中除了page-more的部分时背景颜色调整为自定义颜色*/
  color: white;/*设置page-current和当鼠标悬停在page-item类中除了page-more的部分时颜色调整为白色*/
}
footer {
  margin-top: 60px;/*底部上外边距为60px*/
  background: #333;/*底部背景颜色为黑色*/
  height: 200px;/*底部高度为200px*/
}


